<template>
    <div class="jx-index-container">

        <div class="jx-index-banner2" v-if="roles == undefined">
           <el-carousel height="370px" trigger="click" v-if="isFlagData == 1">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                    <div class="banner2-content" :class="item.bg">
                        <div class="banner2-item" :class="item.item"></div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <el-carousel height="370px" trigger="click" v-else>
                <el-carousel-item v-for="(item,index) in bannerList2" :key="index">
                    <div class="banner2-content" :class="item.bg">
                        <div class="banner2-item" :class="item.item"></div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <!-- <img src="./../../assets/images/banner2.jpg" /> -->
        </div>
        <div class="jx-index-banner-info" v-else>
            <div class="mask-mask" v-if="flag">
                <p><img src="./../../assets/images/choorm.png" /> 系统检测到您未使用谷歌内核浏览器，请使用谷歌内核浏览器打开该系统或者
                    <span class="downsPath" @click="downsPath"> 下载</span>
                    <i class="iconfont icon-Group- wrong" @click="flag =false"></i>
                </p>
            </div>
            <div class="jx-index-banner-info-box">
                <el-row v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
                    <el-col :span="12">
                        <div class="jx-index-banner-content">
                            <div class="jx-index-banner-content-avatar fl">
                                <img :src="avatar" />
                            </div>
                            <div class="jx-index-banner-content-tips fl">{{ timeStr }}，{{ userName }}，祝你开心每一天！</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item">
                                <span>当前教授班级</span>
                                <!-- <p v-if="classesCount == 0" v-text="classesCount"></p> -->
                                <div class="dropdown-link" v-text="classesCount"></div>
                                <!--
                                <el-dropdown trigger="hover" v-if="classesCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                   <span class="el-dropdown-link" v-text="classesCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in classesSelectArr" :key="index" @click.native="ChangeDrodown(1,item.id, item.courseId)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>-->
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批随堂练习</span>
                                <p v-if="unreviewedPracticeCount == 0" v-text="unreviewedPracticeCount"></p>
                                 <!-- <div class="dropdown-link" v-text="unreviewedPracticeCount"></div> -->

                                <el-dropdown trigger="hover" v-if="unreviewedPracticeCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedPracticeCount"></span>
                                    <el-dropdown-menu slot="dropdown" v-if="unreviewedPracticeArr.length > 0">
                                        <el-dropdown-item
                                            v-for="(item, index) in unreviewedPracticeArr"
                                            :key="index"
                                            :class="{ 'last-child': index == (unreviewedPracticeArr.length-1)}"
                                        >
                                            <div class="class-info">
                                                <p :title="item.name">{{ item.name }}</p>
                                                <span :title="item.className">{{ item.className }}</span>
                                            </div>
                                            <div class="class-btn" @click="ChangeDrodown(2,item.id, item.courseId,item.className,item.grade,item.is_ended)">
                                                去审批
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批实验报告</span>
                                <p v-if="unreviewedReportCount == 0" v-text="unreviewedReportCount"></p>
                                <!-- <p  class="dropdown-link" v-text="unreviewedReportCount"></p> -->

                                <el-dropdown trigger="hover" v-if="unreviewedReportCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedReportCount"></span>
                                    <!-- <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedReportArr" :key="index" @click.native="ChangeDrodown(3,item.id, item.courseId,item.name,item.grade,item.status)">{{ item.name }}</el-dropdown-item>
                                    </!-->
                                    <el-dropdown-menu slot="dropdown" v-if="unreviewedReportArr.length > 0">
                                        <el-dropdown-item
                                            v-for="(item, index) in unreviewedReportArr"
                                            :key="index"
                                            :class="{ 'last-child': index == (unreviewedReportArr.length-1)}"
                                        >
                                            <div class="class-info">
                                                <p :title="item.name">{{ item.name }}</p>
                                                <span :title="item.className">{{ item.className }}</span>
                                            </div>
                                            <div class="class-btn" @click="ChangeDrodown(3,item.id, item.courseId,item.className,item.grade,item.is_ended)">
                                                去审批
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批试卷</span>
                                <p v-if="unreviewedTestPaperCount == 0" v-text="unreviewedTestPaperCount"></p>
                                <!-- <p  class="dropdown-link" v-text="unreviewedTestPaperCount"></p> -->

                                <el-dropdown trigger="hover" v-if="unreviewedTestPaperCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedTestPaperCount"></span>
                                    <!-- <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedTestPaperArr" :key="index" @click.native="ChangeDrodown(4,item.id, item.courseId)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu> -->
                                    <el-dropdown-menu slot="dropdown" v-if="unreviewedTestPaperArr.length > 0">
                                        <el-dropdown-item
                                            v-for="(item, index) in unreviewedTestPaperArr"
                                            :key="index"
                                            :class="{ 'last-child': index == (unreviewedTestPaperArr.length-1)}">
                                            <div class="class-info">
                                                <!-- <p :title="item.name" style="margin-top:9px;">{{ item.name }}</p> -->
                                                <p :title="item.name">{{ item.name }}</p>
                                                <span :title="item.className">{{ item.className }}</span>
                                            </div>
                                            <div class="class-btn" @click="ChangeDrodown(4,item.id, item.courseId)">
                                                去审批
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col>

                    <!-- <el-col :span="6">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item">
                                <span>待审批实验报告</span>
                                <p v-if="unreviewedReportCount == 0" v-text="unreviewedReportCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedReportCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedReportCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedReportArr" :key="index" @click.native="ChangeDrodown(3,item.id, item.courseId,item.name,item.grade,item.status)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item">
                                <span>待审批试卷</span>
                                <p v-if="unreviewedTestPaperCount == 0" v-text="unreviewedTestPaperCount"></p>
                                <el-dropdown trigger="hover" v-if="unreviewedTestPaperCount > 0 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                    <span class="el-dropdown-link" v-text="unreviewedTestPaperCount"></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item v-for="(item, index) in unreviewedTestPaperArr" :key="index" @click.native="ChangeDrodown(4,item.id, item.courseId)">{{ item.name }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col> -->
                </el-row>
                <el-row v-else-if="roles == 'STUDENT'">
                    <el-col :span="12">
                        <div class="jx-index-banner-content">
                            <div class="jx-index-banner-content-avatar fl">
                                <img :src="avatar" />
                            </div>
                            <div class="jx-index-banner-content-tips fl">{{ timeStr }}，{{ userName }}，祝你开心每一天！</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="jx-index-banner-text">
                            <div class="jx-index-banner-text-item pinter">
                                <span>正在学习课程</span>
                                <p v-text="studiedCourseNum"></p>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text-item pinter">
                                <span>实验总时长</span>
                                <p v-html="experimentTime"></p>
                            </div>
                            <div class="jx-index-banner-text-xian"></div>
                            <div class="jx-index-banner-text">
                                <div class="jx-index-banner-text-item pinter">
                                    <span>已提交作业数量</span>
                                    <p v-text="submittedExercisesNum"></p>
                                </div>
                                <div class="jx-index-banner-text-xian"></div>
                                <div class="jx-index-banner-text-item pinter">
                                    <span>已提交报告数量</span>
                                    <p v-text="submittedReportNum"></p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="jx-index-content">
            <div v-if="directions && directions.length > 0">
                <div class="jx-index-tab" v-if="directions.length >1 ">
                    <el-button v-if ="tabId.id && !idArr.includes(tabId.id) || !tabId.id "   v-for="(item, index) in directions" :key="index" :class="{ active : tabActive == index }" @click="tabActiveFn(item, index)">{{ item.name }}</el-button>
                    <!-- <el-button v-if ='!tabId.id' v-for="(item, index) in directions" :key="index" :class="{ active : tabActive == index }" @click="tabActiveFn(item, index)">{{ item.name }}</el-button> -->
                    <el-button v-if ='tabId.id && idArr.includes(tabId.id)' v-for="(item, index) in directions" :key="index" :class="{ active :  item.id == tabId.id  }" @click="tabActiveFn(item, index)">{{ item.name }}</el-button>
                </div>
                <div>
                    <!-- 核心课程 -->
                    <div class="jx-content-title"  :style="{'margin-top':(directions.length >1 ? '35px' : '85px')}"  v-if="coreCoursesListArr.length>0 && UndergraduateFlag">
                        <div class="jx-content-title-hd">
                            <h1>
                                <p>MAIN COURSE</p>
                            </h1>
                        </div>
                        <span>核心课程</span>
                        <i class="courseNumber">{{ courseNumber }}门课</i>
                    </div>
                    <div class="jx-course-list"  :class="{ 'jx-course-list-login': roles}" v-if="coreCoursesListArr.length>0 && UndergraduateFlag" style="margin-bottom:20px">
                        <el-carousel :indicator-position="coreCoursesListArr.length>1?'outside':'none'" :autoplay="false" ref="carouselList" :height="carouselListHeight" arrow="never">
                            <el-carousel-item v-for="(item, index) in coreCoursesListArr.length" :key="index">
                                <el-row :gutter="40">
                                    <el-col :span="6" v-for="(item2, index2) in coreCoursesListArr[index]" :key="index2">
                                        <div class="jx-course-box" :class="{bgImg2:index2%2===0,bgImg:index2%2===1}">
                                            <img class="iconPath" :src="item2.iconPath" @click.stop="goDetail(item2.id)">
                                            <div class="maskI" @click.stop="goDetail(item2.id)"></div>
                                            <div class="jx-course-tooltip">
                                                <!-- <img class='studtntCourse' src="../../assets/images/peopleHas.png" v-if=" item2.ownCourse" /> -->
                                                <!--yx注释<img class="iconPath-fan" :src="item2.iconPath+'.fan.png'"  @click="goDetail(item2.id)"> -->
                                                <el-tooltip class="item" effect="dark" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER') && item2.ownCourse" content="教学课程" placement="bottom">
                                                    <!-- yx注释<i class="iconfont icon-wode"></i> -->
                                                    <img class='studtntImg' src="../../assets/images/peopleIndex.png" />
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'" placement="bottom">
                                                    <!-- yx注释<i class="iconfont icon-tianjia-" @click="addClass(item2.id)"></i>  -->
                                                    <!-- 二期更改 -->
                                                    <div slot="content">
                                                        <p style="margin-bottom:8px; cursor: pointer;" @click="addClass(1,item2.id)">创建本课班级</p>
                                                        <p style="cursor: pointer;" @click="addClass(2,item2.id)">关联系统班级</p>
                                                    </div>
                                                    <img class='addClassImg' src="../../assets/images/addIndex.png" />
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" v-if="roles == 'STUDENT' && item2.ownCourse" content="学习课程" placement="bottom">
                                                    <!-- <i class="iconfont icon-wode"></i> -->
                                                    <img class='s-Img' src="../../assets/images/peopleHas.png" />

                                                </el-tooltip>
                                            </div>
                                            <!-- <i class="iconfont icon-tianjia-" @click="addClass(item2.id)" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'"></i> -->
                                        </div>
                                        <div class="jx-course-text-title" v-text="item2.name" @click="goDetail(item2.id)"></div>
                                        <div class="jx-course-text" v-if="roles" @click="goDetail(item2.id)">
                                            <!-- <span v-if="item2.userNames[0] == ''">{{item2.userNames[1]}}</span>
                                            <span v-else>{{item2.userNames[0]}}</span> -->
                                            {{ item2.userNames[0] }}
                                            <span v-if="item2.studied"> ( 已学习 )</span>
                                        </div>
                                        <div class="jx-course-text" v-if="item2.statusValue != null" @click="goDetail(item2.id)">(未购买)</div>
                                    </el-col>
                                </el-row>
                            </el-carousel-item>
                        </el-carousel>
                        <button class="jx-course-list-button prev" v-if="coreCoursesListArr.length > 1" :style="{ 'top': courseBtnHeight }" @click="coreCoursesListPrev">
                            <i class="iconfont icon-xiangzuo-copy"></i>
                        </button>
                        <button class="jx-course-list-button next" v-if="coreCoursesListArr.length > 1" :style="{ 'top': courseBtnHeight }" @click="coreCoursesListNext">
                            <i class="iconfont icon-xiangyou"></i>
                        </button>
                    </div>
                    <!-- <div class="jx-course-tips" v-if="coreCoursesListArr.length == 0 && UndergraduateFlag">
                        <img src="./../../assets/images/index_no_data.png" />
                        <span>暂无核心课程~</span>
                    </div> -->
                    <!-- 核心课程 -->
                    <!-- 扩展课程 -->
                    <div class="jx-content-title" v-if="expandCoursesListArr.length>0  && UndergraduateFlag" >
                        <div class="jx-content-title-hd" style="width:558px;">
                            <h1>
                                <p>EXTENDED COURSE</p>
                            </h1>
                        </div>
                        <span>扩展课程</span>
                        <i class="courseNumber">{{ expandCoursesNumer }}门课</i>
                    </div>
                    <div class="jx-course-list" :class="{ 'jx-course-list-login': roles}" v-if="expandCoursesListArr.length>0  && UndergraduateFlag" style="padding-bottom:56px">
                        <el-carousel :indicator-position="expandCoursesListArr.length>1?'outside':'none'" :autoplay="false" ref="expandList" :height="expandListHeight" arrow="never">
                            <el-carousel-item v-for="(item, index) in expandCoursesListArr.length" :key="index">
                                <el-row :gutter="40">
                                    <el-col :span="6" v-for="(item2, index2) in expandCoursesListArr[index]" :key="index2">
                                        <div class="jx-course-box" :class="{bgImg2:index2%2===0,bgImg:index2%2===1}">
                                            <img class="iconPath" :src="item2.iconPath" @click="goDetail(item2.id)">
                                            <div class="maskI" @click.stop="goDetail(item2.id)"></div>
                                            <div class="jx-course-tooltip">
                                                <!-- <img class='studtntCourse' src="../../assets/images/peopleHas.png" v-if=" item2.ownCourse" /> -->
                                                <!-- <img class="iconPath-fan" :src="item2.iconPath+'.fan.png'"  @click="goDetail(item2.id)"> -->
                                                <el-tooltip class="item" effect="dark" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER') && item2.ownCourse" content="教学课程" placement="bottom">
                                                    <!-- <i class="iconfont icon-wode"></i> -->
                                                    <img class='studtntImg' src="../../assets/images/peopleIndex.png" />
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" v-if="roles == 'STUDENT' && item2.ownCourse" content="学习课程" placement="bottom">
                                                    <img class='studtntImg leftsImg' src="../../assets/images/peopleIndex.png" />
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'" placement="bottom">
                                                    <!-- yx注释<i class="iconfont icon-tianjia-" @click="addClass(item2.id)"></i>  -->
                                                    <!-- 二期更改 -->
                                                    <div slot="content">
                                                        <p style="margin-bottom:8px; cursor: pointer;" @click="addClass(1,item2.id)">创建本课班级</p>
                                                        <p style="cursor: pointer;" @click="addClass(2,item2.id)">关联系统班级</p>
                                                    </div>
                                                    <img class='addClassImg' src="../../assets/images/addIndex.png" />
                                                </el-tooltip>
                                            </div>
                                            <!-- <i class="iconfont icon-tianjia-" @click="addClass(item2.id)" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'"></i> -->
                                        </div>
                                        <div class="jx-course-text-title" v-text="item2.name" @click="goDetail(item2.id)"></div>
                                        <div class="jx-course-text" v-if="roles" @click="goDetail(item2.id)">
                                            <!-- <span v-if="item2.userNames[0] == ''">{{item2.userNames[1]}}</span>
                                            <span v-else>{{item2.userNames[0]}}</span> -->
                                            {{ item2.userNames[0] }}
                                            <span v-if="item2.studied"> ( 已学习 )</span>
                                        </div>
                                        <div class="jx-course-text" v-if="item2.statusValue != null" @click="goDetail(item2.id)">(未购买)</div>
                                    </el-col>
                                </el-row>
                            </el-carousel-item>
                        </el-carousel>
                        <button class="jx-course-list-button prev" v-if="expandCoursesListArr.length > 1" :style="{ 'top': expandBtnHeight }" @click="expandListPrev">
                            <i class="iconfont icon-xiangzuo-copy"></i>
                        </button>
                        <button class="jx-course-list-button next" v-if="expandCoursesListArr.length > 1" :style="{ 'top': expandBtnHeight }" @click="expandListNext">
                            <i class="iconfont icon-xiangyou"></i>
                        </button>
                    </div>
                    <!-- <div class="jx-course-tips" v-if="expandCoursesListArr.length == 0 && UndergraduateFlag">
                        <img src="./../../assets/images/index_no_data.png" />
                        <span>暂无扩展课程~</span>
                    </div> -->
                    <!-- 扩展课程 -->
                    <!-- 专科版本 -->
                    <!-- 教学课程 -->
                    <div class="jx-content-title" style="margin-top:35px" v-if="teachingListArr.length>0  && !UndergraduateFlag">
                        <div class="jx-content-title-hd">
                            <h1>
                                <p>TEACHING COURSE</p>
                            </h1>
                        </div>
                        <span>教学课程</span>
                        <i class="courseNumber">{{ collageNumer }}门课</i>
                    </div>
                    <div class="jx-course-list" :class="{ 'jx-course-list-login': roles}" v-if="teachingListArr.length>0  && !UndergraduateFlag">
                        <el-carousel :indicator-position="teachingListArr.length>1?'outside':'none'" :autoplay="false" ref="teachingList" :height="teachingListHeight" arrow="never">
                            <el-carousel-item v-for="(item, index) in teachingListArr.length" :key="index">
                                <el-row :gutter="40">
                                    <el-col :span="6" v-for="(item2, index2) in teachingListArr[index]" :key="index2">
                                        <div class="jx-course-box" :class="{bgImg2:index2%2===0,bgImg:index2%2===1}">
                                            <img class="iconPath" :src="item2.iconPath" @click.stop="goDetail(item2.id)">
                                            <div class="maskI" @click.stop="goDetail(item2.id)"></div>
                                            <div class="jx-course-tooltip">
                                                <!-- <img class='studtntCourse' src="../../assets/images/peopleHas.png" v-if=" item2.ownCourse" /> -->
                                                <!--yx注释<img class="iconPath-fan" :src="item2.iconPath+'.fan.png'"  @click="goDetail(item2.id)"> -->
                                                <el-tooltip class="item" effect="dark" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' ||  roles == 'UNIVERSITY_TEACHER') && item2.ownCourse" content="教学课程" placement="bottom">
                                                    <!-- yx注释<i class="iconfont icon-wode"></i> -->
                                                    <img class='studtntImg' src="../../assets/images/peopleIndex.png" />
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'" placement="bottom">
                                                    <!-- yx注释<i class="iconfont icon-tianjia-" @click="addClass(item2.id)"></i>  -->
                                                    <!-- 二期更改 -->
                                                    <div slot="content">
                                                        <p style="margin-bottom:8px; cursor: pointer;" @click="addClass(1,item2.id)">创建本课班级</p>
                                                        <p style="cursor: pointer;" @click="addClass(2,item2.id)">关联系统班级</p>
                                                    </div>
                                                    <img class='addClassImg' src="../../assets/images/addIndex.png" />
                                                </el-tooltip>
                                                <el-tooltip class="item" effect="dark" v-if="roles == 'STUDENT' && item2.ownCourse" content="学习课程" placement="bottom">
                                                    <!-- <i class="iconfont icon-wode"></i> -->
                                                    <img class='s-Img' src="../../assets/images/peopleHas.png" />

                                                </el-tooltip>
                                            </div>
                                            <!-- <i class="iconfont icon-tianjia-" @click="addClass(item2.id)" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'"></i> -->
                                        </div>
                                        <div class="jx-course-text-title" v-text="item2.name" @click="goDetail(item2.id)"></div>
                                        <div class="jx-course-text" v-if="roles" @click="goDetail(item2.id)">
                                            <!-- <span v-if="item2.userNames[0] == ''">{{item2.userNames[1]}}</span>
                                            <span v-else>{{item2.userNames[0]}}</span> -->
                                            {{ item2.userNames[0] }}
                                            <span v-if="item2.studied"> ( 已学习 )</span>
                                        </div>
                                        <div class="jx-course-text" v-if="item2.statusValue != null" @click="goDetail(item2.id)">(未购买)</div>
                                    </el-col>
                                </el-row>
                            </el-carousel-item>
                        </el-carousel>
                        <button class="jx-course-list-button prev" v-if="teachingListArr.length > 1" :style="{ 'top': teachingBtnHeight }" @click="teachingListPrev">
                            <i class="iconfont icon-xiangzuo-copy"></i>
                        </button>
                        <button class="jx-course-list-button next" v-if="teachingListArr.length > 1" :style="{ 'top': teachingBtnHeight }" @click="teachingListNext">
                            <i class="iconfont icon-xiangyou"></i>
                        </button>
                    </div>
                    <!-- <div class="jx-course-tips" v-if="teachingListArr.length == 0 && !UndergraduateFlag">
                        <img src="./../../assets/images/index_no_data.png" />
                        <span>暂无教学~</span>
                    </div> -->
                    <!-- 教学课程 -->
                    <!-- 专科版本 -->
                </div>
                <!-- 职业学习路线 -->
                <div class="jx-content-title" v-if="studyListArr.length > 0">
                    <div class="jx-content-title-hd" style="width:750px;">
                        <h1>
                            <p>VOCATIONAL STUDY ROUTE</p>
                        </h1>
                    </div>
                    <span>职业学习路线</span>
                </div>
                <div class="jx-course-list4" v-if="studyListArr.length > 0">
                    <el-carousel :indicator-position="studyListArr.length>1?'outside':'none'" :autoplay="false" ref="studyList" :height="studyListHeight" arrow="never">
                            <el-carousel-item v-for="(item, index) in studyListArr.length" :key="index">
                            <el-row :gutter="20">
                                <el-col :span="8" v-for="(item2, index2) in studyListArr[index]" :key="index2">
                                    <div class="list" @click="goStudyDeatil(item2.id,item2.pathName)">
                                        <div class="list-left fl">
                                            <div class="title">
                                                <span :title="item2.name">{{ item2.name }}</span>
                                                <p v-if="item2.iconValue == '大数据研发工程师.png'" class="orange"></p>
                                                <p v-else-if="item2.iconValue == '大数据可视化工程师.png'" class="green"></p>
                                                <p v-else-if="item2.iconValue == '大数据清洗工程师.png'" class="pink"></p>
                                                <p v-else-if="item2.iconValue == '大数据运维工程师.png'" class="darkGreen"></p>
                                                <p v-else-if="item2.iconValue == '大数据采集工程师.png'" class="blue"></p>
                                            </div>
                                            <div class="num">技能模块数量：{{ item2.childrenList == '' ? 0 : item2.childrenList[0].childrenList.length }}个</div>
                                        </div>
                                        <div class="list-right fr">
                                            <img :src="item2.url" />
                                        </div>
                                        <!-- <div class="point" v-if="item2.falg"></div> -->
                                    </div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <button class="jx-course-list-button prev" v-if="studyListArr.length > 1" :style="{ 'top': studyBtnHeight }" @click="studyPrev">
                        <i class="iconfont icon-xiangzuo-copy"></i>
                    </button>
                    <button class="jx-course-list-button next" v-if="studyListArr.length > 1" :style="{ 'top': studyBtnHeight }"  @click="studyNext">
                        <i class="iconfont icon-xiangyou"></i>
                    </button>
                </div>
                <!-- 职业学习路线 -->
                <!-- 互联网核心课程 -->
                <div class="jx-content-title" v-if="technologiesListArr && technologiesListArr.length > 0 && UndergraduateFlag">
                    <div class="jx-content-title-hd" style=" width: 778px;">
                        <h1>
                            <p>BIG DATA TECHNOLOGY LIBRARY</p>
                        </h1>
                    </div>
                    <span>大数据技术库</span>
                </div>
                <div class="jx-course-list2" v-if="technologiesListArr && technologiesListArr.length > 0 && UndergraduateFlag">
                    <el-carousel :indicator-position="technologiesListArr.length > 1?'outside':'none'" :autoplay="false" ref="technologiesList" :height="technologiesListHeight" arrow="never">
                        <el-carousel-item v-for="(item, index) in technologiesListArr.length" :key="index">
                            <el-row :gutter="20">
                                <el-col :span="4" v-for="(item2, index2) in technologiesListArr[index]" :key="index2">
                                    <div class="jx-course-box" @click="goSkillLibrary(item2.id)">
                                        <div class="jx-course-box-title" v-text="item2.name"></div>
                                        <div class="jx-course-box-num" v-text="item2.useNum"></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <button class="jx-course-list-button prev" v-if="technologiesListArr && technologiesListArr.length > 1" :style="{ 'top': technologiesBtnHeight }" @click="technologiesPrev">
                        <i class="iconfont icon-xiangzuo-copy"></i>
                    </button>
                    <button class="jx-course-list-button next" v-if="technologiesListArr && technologiesListArr.length > 1" :style="{ 'top': technologiesBtnHeight }" @click="technologiesNext">
                        <i class="iconfont icon-xiangyou"></i>
                    </button>
                </div>

                <div class="jx-course-tips" v-if="technologiesListArr == [] &&  technologiesListArr.length == 0 && UndergraduateFlag">
                    <img src="./../../assets/images/index_no_data.png" />
                    <span>暂无大数据技术库~ </span>
                </div>
                <!-- 大数据行业案例库 -->
                <div class="jx-content-title" v-if="businessCaseListArr && businessCaseListArr.length > 0">
                    <div class="jx-content-title-hd" style=" width: 787px;">
                        <h1>
                            <p>BIG DATA INDUSTRY CASELIBRARY</p>
                        </h1>
                    </div>
                    <span>大数据行业案例库</span>
                </div>
                <div class="jx-course-list3" v-if="businessCaseListArr && businessCaseListArr.length > 0 ">
                    <el-carousel :indicator-position="businessCaseListArr.length >1?'outside':'none'" :autoplay="false" ref="businessCaseList" height="190px" arrow="never">
                        <el-carousel-item v-for="(item, index) in businessCaseListArr.length" :key="index">
                            <el-row :gutter="20">
                                <el-col :span="4" v-for="(item2, index2) in businessCaseListArr[index]" :key="index2">
                                    <div class="jx-course-box" @click="detailFn(item2.businessCaseId,item2.businessCaseName)">
                                        <div class="jx-course-box-img">
                                            <img class="iconPath-fan" :src="item2.businessCaseIcon+'.fan.png'" />
                                            <img class="iconPath" :src="item2.businessCaseIcon" />
                                        </div>
                                        <div class="jx-course-box-text" v-text="item2.businessCaseName"></div>
                                        <div class="jx-course-box-num" v-text="item2.caseNum"></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <button class="jx-course-list-button prev" v-if="businessCaseListArr.length > 1" @click="businessCasePrev">
                        <i class="iconfont icon-xiangzuo-copy"></i>
                    </button>
                    <button class="jx-course-list-button next" v-if="businessCaseListArr.length > 1" @click="businessCaseNext">
                        <i class="iconfont icon-xiangyou"></i>
                    </button>
                </div>
                <div class="jx-course-tips" v-if=" businessCaseListArr == [] && businessCaseListArr.length == 0">
                    <img src="./../../assets/images/index_no_data.png" />
                    <span>暂无大数据行业案例库~</span>
                </div>
            </div>
            <div class="none-direction" v-else>
                <img src="./../../assets/images/wu.png" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bannerList: [
                {
                    bg:"banner-1",
                    item:"banner-1-item",
                },
                {
                    bg:"banner-2",
                    item:"banner-2-item",
                },
                {
                    bg:"banner-3",
                    item:"banner-3-item",
                },
            ],
            bannerList2: [
                {
                    bg:"banner-1",
                    item:"banner-1-item1",
                },
                {
                    bg:"banner-2",
                    item:"banner-2-item2",
                },
                {
                    bg:"banner-3",
                    item:"banner-3-item3",
                },
            ],
            // 登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
            roles: "",

            // 当前教授班级
            classesCount: "",
            classesSelectArr: [],
            // 待审批随堂练习
            unreviewedPracticeCount: "",
            // 待审批随堂练习集合
            unreviewedPracticeArr: [],
            // 待审批实验报告
            unreviewedReportCount: "",
            unreviewedReportArr: [],
            // 待审批试卷
            unreviewedTestPaperCount: "",
            unreviewedTestPaperArr: [],
            // banner信息集合
            coreCoursesArr: "",
            // 时间字段 早安
            timeStr: "",
            // 用户名
            userName: "",
            // 头像
            avatar: "",
            // 已学习课程数
            studiedCourseNum: "",
            // 实验总时长
            experimentTime: "",
            // 已提交作业数量
            submittedExercisesNum: "",
            // 已提交报告数量
            submittedReportNum: "",
            // 核心课程集合
            coreCoursesListArr: [],
            // 核心课程列表高度
            carouselListHeight: "",
            // 核心课程翻页top
            courseBtnHeight: "",
            // 扩展课程集合
            expandCoursesListArr: [],
            // 扩展课程列表高度
            expandListHeight: "",
            // 核心课程翻页top
            expandBtnHeight: "",
            // 大数据技术库集合
            technologiesListArr: [],
            // 大数据技术库列表高度
            technologiesListHeight: "",
            // 大数据技术库翻页top
            technologiesBtnHeight: "",
            // 行业案例集合
            businessCaseListArr: [],
            // 新增
            studyListArr: [],
            studyListHeight:'',
            studyBtnHeight: '',

            // 教学课程
            teachingListArr: [],
            teachingListHeight:'',
            teachingBtnHeight: '',
            //
            //判断是否是谷歌浏览器
            flag: "",
            //下载链接
            path: "",

            //tab切换index
            tabActive: '0',
            internetStatus: '',
            directions: '',
            //是否显示二维码
            isFlagData:'',

            // 专科true 本科false
            UndergraduateFlag: true,
            //tab标签id
            tabId:{},
            tabList:{},
            //核心课程数量
            courseNumber:'',
            //拓展课程数量
            expandCoursesNumer:'',
            //专科教学课程
            collageNumer:'',

            //tab页签数组
            idArr:[],

        };
    },
    created() {
        console.log(6666666);
        let self = this;
        //yx 为了清空本地缓存
        self.$localstorage.putLocalStorage("isClickSystem", false);
        //获取缓存id值
        self.tabId = self.$localstorage.getLocalStorage('directionList')

        //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
        self.roles = self.$store.state.user.roles[0];
        // 从状态管理获取头像
        self.avatar = self.$store.state.user.avatar;
        //首页数据初始化
        self.indexInit();
        //判断是否是谷歌浏览器
        self.checkBrowser();
        //显示二维码
        self.isFlag()
    },
    methods: {
        //是否显示二维码
        isFlag(){
            let self = this
            self.$http.get('/tes/unauthorized/config?keys=indexQrCode').then(response => {
                let res = response.data
                if(res.code == '200'){
                    if(res.data.indexQrCode != undefined){
                        self.isFlagData =  res.data.indexQrCode[0].keyValue
                    }
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //判断是否是谷歌浏览器
        checkBrowser() {
            let ua = navigator.userAgent.toLocaleLowerCase();
            if (ua.match(/chrome/) != null) {
                //是谷歌浏览器
                console.log('是谷歌')
                this.flag = false;
            } else {
                //不是谷歌浏览器
                console.log('不是谷歌')
                this.flag = true;
            }
        },
        //下载谷歌浏览器
        downsPath() {
            let self = this;
            self.$http.get("/tes/unauthorized/config?keys=browserVersion").then(response => {
                let res = response.data;
                if (res.code == "200") {
                    self.path = res.data.browserVersion[0].keyValuePath;
                    // let downloadElement = document.createElement('a');
                    // downloadElement.style.display = 'none';
                    // downloadElement.href =  self.path
                    // downloadElement.click(); //点击下载
                    //document.body.removeChild(downloadElement); //下载完成移除元素
                    var a = document.createElement("a");
                    a.href = self.path;
                    $("body").append(a); // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                    self.flag = false;
                } else {
                    self.$message.error(res.message);
                }
            });
        },
        //首页数据初始化
        indexInit() {
            let self = this;
            self.$http.get("/tes/unauthorized/index").then(response => {
                let res = response.data;
                if (res.code == 200) {

                    //判断当前角色 教师显拉取教师信息 学生拉取学生信息
                    if (self.roles == "TEACHER" || self.roles == "MARKET_TEACHER" || self.roles == "UNIVERSITY_TEACHER") {
                        self.classesCount = res.data.classes.count; //当前教授班级
                        self.unreviewedPracticeCount = res.data.unreviewedPractice.count; //待审批随堂练习
                        self.unreviewedReportCount = res.data.unreviewedReport.count; //待审批实验报告
                        self.unreviewedTestPaperCount = res.data.unreviewedTestPaper.count; //待审批试卷
                        self.classesSelectArr = res.data.classes.classes;
                        self.unreviewedPracticeArr = res.data.unreviewedPractice.courseIAndClass; // 待审批随堂练习集合
                        self.unreviewedReportArr = res.data.unreviewedReport.courseIAndClass; // 待审批实验报告集合
                        self.unreviewedTestPaperArr = res.data.unreviewedTestPaper.courseIAndClass; // 待审批试卷集合
                    } else if (self.roles == "STUDENT") {
                        self.studiedCourseNum = res.data.studiedCourseNum; //已学习课程
                        //self.experimentTime = res.data.experimentTime   //实验总时长
                        //yx修改时间形式
                        self.experimentTime = res.data.experimentTime
                            .replace(/D/, "<font size='3'> 天 </font>")
                            .replace(/H/, "<font size='3'> 时 </font>")
                            .replace(/S/, "<font size='3'> 秒 </font>")
                            .replace(/M/, "<font size='3'> 分 </font>");
                        self.submittedExercisesNum = res.data.submittedExercisesNum; //已提交作业数量s
                        self.submittedReportNum = res.data.submittedReportNum; //已提交报告数量
                    }
                    self.coreCoursesArr = res.data.coreCourses; //banner信息集合
                    self.timeStr = res.data.timeStr; //时间字段 早安
                    self.userName = res.data.userName; //用户名

                    // 专科职业路线
                    self.studyListArr = res.data.skills ? res.data.skills : []



                    if (typeof res.data.technologies == "undefined") {
                        self.technologiesListArr = [];
                    } else {
                        self.technologiesListArr = res.data.technologies; //大数据技术库
                    }
                    self.businessCaseListArr = res.data.businessCase; //行业案例
                     console.log(res.data.requestCourse,8888)
                    if (self.roles) {
                        //大数据技术库
                        if (self.technologiesListArr.length > 0) {
                            if (self.technologiesListArr.length == 1 && self.technologiesListArr[0].length <= 6) {
                                self.technologiesListHeight = "160px";
                                self.technologiesBtnHeight = "50px";
                            } else {
                                self.technologiesListHeight = "350px";
                                // self.expandBtnHeight = '168px'
                            }
                        }
                        if (self.studyListArr.length > 0) {
                            if (self.studyListArr.length == 1 && self.studyListArr[0].length <= 4) {
                                self.studyListHeight = "264px";
                                self.studyBtnHeight = "30px";
                            }else if(self.studyListArr[0].length > 4 && self.studyListArr[0].length < 8){
                                self.studyListHeight = "309px";
                                self.studyBtnHeight = "100px";
                            } else {
                                self.studyListHeight = "309px";
                                self.studyBtnHeight = '100px'
                            }
                        }
                    } else {
                        //大数据技术库
                        console.log(self.technologiesListArr,5555)
                        if (self.technologiesListArr.length >= 0) {
                            if (self.technologiesListArr.length == 1 && self.technologiesListArr[0].length <= 4) {
                                self.technologiesListHeight = "160px";
                                self.technologiesBtnHeight = "50px";
                            } else {
                                self.technologiesListHeight = "350px";
                                self.technologiesBtnHeight = "140px";
                            }
                        }
                        // 专科职业路线
                        if (self.studyListArr.length >0) {
                            if (self.studyListArr.length == 1 && self.studyListArr[0].length <= 4) {
                                //self.studyListHeight = "112px";
                                self.studyListHeight = "264px";
                                self.studyBtnHeight = "30px";
                            }else if(self.studyListArr[0].length > 4 && self.studyListArr[0].length < 8){
                                self.studyListHeight = "309px";
                                self.studyBtnHeight = "100px";
                            }else {
                                self.studyListHeight = "309px";
                                self.studyBtnHeight = "100px";
                            }
                        }
                        // if (self.technologiesListArr.length != "undefined") {
                        //      alert(45)
                        //     if (self.technologiesListArr.length == 1 && self.technologiesListArr[0].length <= 4) {
                        //         self.technologiesListHeight = "160px";
                        //         self.technologiesBtnHeight = "50px";
                        //     } else {
                        //         self.technologiesListHeight = "350px";
                        //         self.technologiesBtnHeight = "140px";
                        //     }
                        // }
                        // // 专科职业路线
                        // if (self.studyListArr != "undefined" ) {
                        //     alert(44)
                        //     if (self.studyListArr.length == 1 && self.studyListArr[0].length <= 4) {
                        //         //self.studyListHeight = "112px";
                        //         self.studyListHeight = "264px";
                        //         self.studyBtnHeight = "30px";
                        //     }else if(self.studyListArr[0].length > 4 && self.studyListArr[0].length < 8){
                        //         self.studyListHeight = "309px";
                        //         self.studyBtnHeight = "100px";
                        //     }else {
                        //         self.studyListHeight = "309px";
                        //         self.studyBtnHeight = "100px";
                        //     }
                        // }
                    }
                    // 二期更改
                    // 是否请求下一次接口

                    if(res.data.requestCourse){
                        self.internetStatus = res.data.internet
                        // self.internetData = res.data.internetData
                        self.directions = res.data.directions
                        //判断本地缓存值是否存在
                        self.idArr = self.directions.map(item=>item.id)

                        if(self.tabId && self.idArr.includes(self.tabId.id)){
                            self.initInternet(self.tabId)
                        }else{
                            self.initInternet(res.data.directions[0])
                        }

                    }else{
                        if (typeof res.data.coreCourses == "undefined") {
                            self.coreCoursesListArr = [];
                        } else {
                            self.coreCoursesListArr = res.data.coreCourses; //核心课程
                        }
                        if (typeof res.data.expandCourses == "undefined") {
                            self.expandCoursesListArr = [];
                        } else {
                            self.expandCoursesListArr = res.data.expandCourses; //扩展课程
                        }
                        if (self.roles) {
                            // self.listHeight1 = '440px'
                            //核心课程
                            if (self.coreCoursesListArr.length > 0) {
                                if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                    self.carouselListHeight = "213px";
                                    self.courseBtnHeight = "50px";
                                } else {
                                    self.carouselListHeight = "418px";
                                    self.courseBtnHeight = "158px";
                                }
                            }
                            //扩展课程
                            if (self.expandCoursesListArr.length > 0) {
                                if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                    self.expandListHeight = "213px";
                                    self.expandBtnHeight = "50px";
                                } else {
                                    self.expandListHeight = "418px";
                                    self.expandBtnHeight = "168px";
                                }
                            }
                        } else {
                            //核心课程
                            if (self.coreCoursesListArr != "undefined") {
                                if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                    self.carouselListHeight = "213px";
                                    self.courseBtnHeight = "50px";
                                } else {
                                    self.carouselListHeight = "418px";
                                    self.courseBtnHeight = "140px";
                                }
                            }
                            //扩展课程
                            if (self.expandCoursesListArr != "undefined") {
                                if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                    self.expandListHeight = "213px";
                                    self.expandBtnHeight = "50px";
                                } else {
                                    self.expandListHeight = "418px";
                                    self.expandBtnHeight = "158px";
                                }
                            }
                        }
                    }


                } else {
                    self.$message.error(res.message);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        //求课程数量
        //list 集合
        coursNums(list) {
            //let n = []
            // for(let i =0; i< list.length; i++){
            //     let arrs =  list[i].map(itm=>itm.id)
            //     n.push(...arrs)
            // }

            let n = list.reduce((prev, next)=>{
                return prev.concat(next)
            },[])
            return n.length
        },
        // 互联网版本
        initInternet(directions){
            let self = this;
            if(directions.keyValue == '本科'){
                self.UndergraduateFlag = true
            }else{
                self.UndergraduateFlag = false
            }
            self.$http.get('/tes/unauthorized/index-course?directionId='+directions.id).then(response => {
                let res = response.data
                if(res.code == '200'){
                    // 判断是本科专科
                    if(directions.keyValue == '本科'){
                        if (typeof res.data.coreCourses == "undefined") {
                            self.coreCoursesListArr = [];
                        } else {
                            self.coreCoursesListArr = res.data.coreCourses; //核心课程
                            //yx核心课程
                            self.courseNumber = self.coursNums(res.data.coreCourses)
                            //self.courseNumber = res.data.coreCourses.flat(1).length
                        }
                        if (typeof res.data.expandCourses == "undefined") {
                            self.expandCoursesListArr = [];
                        } else {
                            self.expandCoursesListArr = res.data.expandCourses; //扩展课程
                            //yx添加扩展课程数量
                            self.expandCoursesNumer = self.coursNums(res.data.expandCourses)
                            //self.expandCoursesNumer = res.data.expandCourses.flat(1).length
                        }
                    }else{

                        if (typeof res.data.courses == "undefined") {
                            self.teachingListArr = [];
                        } else {
                            self.teachingListArr = res.data.courses; //教学课程
                            //yx添加教学课程数量
                            self.collageNumer = self.coursNums(res.data.courses)
                        }
                    }

                    //技能
                    self.studyListArr = res.data.skills ? res.data.skills : [];

                    if (self.studyListArr.length > 0) {
                        if (self.studyListArr.length == 1 && self.studyListArr[0].length <= 3) {
                            self.studyListHeight = "264px";
                            self.studyBtnHeight = "30px";
                        } else {
                            self.studyListHeight = `${264 + ( Math.ceil(self.studyListArr[0].length / 3) - 1) * 125 }px`;
                            self.studyBtnHeight = '100px'
                        }
                    }

                    if (self.roles) {
                        //核心课程
                        if (self.coreCoursesListArr.length > 0) {
                            if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                self.carouselListHeight = "213px";
                                self.courseBtnHeight = "50px";
                            } else {
                                self.carouselListHeight = "418px";
                                self.courseBtnHeight = "158px";
                            }

                        }
                        //扩展课程
                        if (self.expandCoursesListArr.length > 0) {
                            if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                self.expandListHeight = "213px";
                                self.expandBtnHeight = "50px";
                            } else {
                                self.expandListHeight = "418px";
                                self.expandBtnHeight = "168px";
                            }
                        }
                        // 教学课程
                        if (self.teachingListArr.length > 0) {
                            if (self.teachingListArr.length == 1 && self.teachingListArr[0].length <= 4) {
                                self.teachingListHeight = "213px";
                                self.teachingBtnHeight = "50px";
                            } else {
                                self.teachingListHeight = "418px";
                                self.teachingBtnHeight = "168px";
                            }
                        }
                    } else {
                        //核心课程
                        if (self.coreCoursesListArr != "undefined") {
                            if (self.coreCoursesListArr.length == 1 && self.coreCoursesListArr[0].length <= 4) {
                                self.carouselListHeight = "213px";
                                self.courseBtnHeight = "50px";
                            } else {
                                //yx
                                self.carouselListHeight = "390px";
                                self.courseBtnHeight = "140px";
                            }
                        }
                        // 扩展课程
                        if (self.expandCoursesListArr != "undefined") {
                            if (self.expandCoursesListArr.length == 1 && self.expandCoursesListArr[0].length <= 4) {
                                self.expandListHeight = "213px";
                                self.expandBtnHeight = "50px";
                            } else {
                                self.expandListHeight = "390px";
                                self.expandBtnHeight = "158px";
                            }
                        }
                        // 教学课程
                        if (self.teachingListArr != "undefined") {
                            if (self.teachingListArr.length == 1 && self.teachingListArr[0].length <= 4) {
                                self.teachingListHeight = "213px";
                                self.teachingBtnHeight = "50px";
                            } else {
                                self.teachingListHeight = "418px";
                                self.teachingBtnHeight = "158px";
                            }
                        }
                    }
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 核心课程下一页
        coreCoursesListNext() {
            this.$refs.carouselList.next();
        },
        // 核心课程上一页
        coreCoursesListPrev() {
            this.$refs.carouselList.prev();
        },
        // 扩展课程下一页
        expandListNext() {
            this.$refs.expandList.next();
        },
        // 核心课程上一页
        expandListPrev() {
            this.$refs.expandList.prev();
        },
        // 大数据技术库下一页
        technologiesNext() {
            this.$refs.technologiesList.next();
        },
        // 大数据技术库上一页
        technologiesPrev() {
            this.$refs.technologiesList.prev();
        },
        // 行业案例下一页
        businessCaseNext() {
            this.$refs.businessCaseList.next();
        },
        // 行业案例上一页
        businessCasePrev() {
            this.$refs.businessCaseList.prev();
        },
        // 教学案例上一页
        teachingListPrev(){
            this.$refs.teachingList.prev();
        },
        // 教学案例下一页
        teachingListNext(){
            this.$refs.teachingList.next();
        },
        // 学习路线上一页
        studyPrev(){
            this.$refs.studyList.prev();
        },
        // 学习路线下一页
        studyNext(){
            this.$refs.studyList.next();
        },
        // 添加班级
        addClass(type,id) {
            // 二期更改
            // type 自定义类型 1.创建本课班级 2.关联系统班级
            // id 课程ID
            let self = this
            self.$localstorage.putLocalStorage("setCourseId", id);
            if(type == 1){
                self.$router.push({ path: "/Teaching/AddClass" });
            }else{
                self.$router.push({ path: "/Teaching/AssociationClass" });
            }
        },
        // 跳转详情
        goDetail(courseId) {
            let self = this;
            self.$localstorage.putLocalStorage("setCourseId", courseId);
            // 添加goTarget 判断是从首页跳转还是创建课程
            self.$localstorage.putLocalStorage("goTarget", 'index');
            // self.$store.dispatch('addCourseId', courseId)
            self.$router.push({ path: "/Teaching/MyCourses/CourseDetail" });
        },
        // 跳转职业路线详情
        goStudyDeatil(id,pathName){
            let self = this;
            console.log(id,123)
            // self.$localstorage.putLocalStorage("setCourseId", id);
            // 添加goTarget 判断是从首页跳转还是创建课程
            self.$localstorage.putLocalStorage("goTarget", 'index');
            // self.$store.dispatch('addCourseId', courseId)
            // self.$router.push({ path: "/Teaching/MyCourses/CourseDetail" });
            //岗位ID
            console.log(pathName)
            self.$router.push({
                path: "/Teaching/PostSkills",
                query: {
                    postId : id,
                    pathName : pathName
                }//,myfalg : falg
            })
        },
        // 跳转大数据技术库
        goSkillLibrary(skillLibraryId) {
            let self = this;
            // 添加技能Id
            self.$localstorage.putLocalStorage("setSkillLibraryId", skillLibraryId);
            self.$router.push({ path: "/Teaching/MyCourses/SkillLibrary" });
        },
        //大数据行业案例
        detailFn(caseId, businessCaseName) {
            this.$router.push({
                path: "/Teaching/CasePresentation",
                query: { id: caseId, csaeName: businessCaseName }
            });
        },
        // 切换首页下拉
        // index: 1.当前教授班级 2.待审批随堂练习 3.待审批实验报告 4.待审批试卷
        // classID 班级id
        // courseID 课程iD
        //首页上方信息下拉取消该功能 杨旭
        ChangeDrodown(index, classID, courseID, name, grade, status) {
            let self = this;
            //当前教授班级
            self.$localstorage.putLocalStorage("setCourseId", courseID);
            if (index == 1) {
                self.$router.push({
                    path: "/Teaching/MyCourses/Management/ManageClass/ManageStudent",
                    query: {
                        id: classID
                    }
                });
            } else if (index == 2) {
                self.$router.push({
                    path: "/Teaching/MyCourses/marking",
                    query: {
                        classArr: status + "," + grade + "," + name //是随堂练习
                    }
                });
            } else if (index == 3) {
                self.$router.push({
                    path: "/Teaching/MyCourses/marking",
                    query: {
                        reportArr: status + "," + grade + "," + name //实验报告
                    }
                });
            } else if (index == 4) {
                self.$router.push({
                    path: "/Teaching/MyCourses/Examination/TestPaper/ExaminationList"
                });
            }
        },
        //tab切换
        tabActiveFn(item, index){
            let self = this
            //新增需求
            self.tabList['id'] = item.id
            self.tabList['keyValue'] = item.keyValue

            self.$localstorage.putLocalStorage('directionList', self.tabList)
            if(self.tabId){
                self.tabId.id = item.id
            }
            self.tabActive = index
            self.initInternet(item)
        }
    }
};
</script>
<style scoped>

/* 二期 banner下拉样式 */
.el-dropdown-menu{
    max-height: 400px;
    overflow-y: auto;
}
.el-dropdown-menu .el-dropdown-menu__item:focus, .el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):hover{
    background-color: transparent;
    color: #606266;
}
/* .el-dropdown-menu .el-dropdown-menu__item span:focus, .el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled) span:hover{
    color: #66b1ff;
} */
.el-dropdown-menu .el-dropdown-menu__item{
    line-height: 1;
    border-bottom: solid 1px #e8e8e8;
    height: 50px;
    padding: 10px 20px 8px;
    box-sizing: border-box;
}
.el-dropdown-menu .el-dropdown-menu__item.last-child{
    border-bottom: solid 1px #fff;
}
.el-dropdown-menu .el-dropdown-menu__item .class-info p{
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 4px;
    color: #474747;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.el-dropdown-menu .el-dropdown-menu__item .class-info span{
    font-size: 12px;
    line-height: 12px;
    color: #b3b3b3;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.el-dropdown-menu .el-dropdown-menu__item:hover{
    background: #f5f7fb;
}
.el-dropdown-menu .el-dropdown-menu__item .class-info{
    float: left;
    width: 145px;
}
.el-dropdown-menu .el-dropdown-menu__item .class-btn{
    float: left;
    width: 46px;
    height: 20px;
    border: solid 1px #1277eb;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #1277eb;
    cursor: pointer;
    margin-top: 5px;
}
.el-dropdown-menu .el-dropdown-menu__item .class-btn:hover{
    background: #1277eb;
    color: #fff;
}
/* .el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled) span{
    display: inline-block;
}
.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled) span:first-child{
    width: 100px;
} */
.dropdown-link{
    margin-top: 10px;
    font-size: 26px;
}
.leftsImg {
    left: 14px !important;
}
.pinter {
    cursor: unset !important;
}
/* 重置轮播按钮样式 */
.el-carousel {
    overflow-y: hidden;
}
.el-carousel >>> .el-carousel__indicators--outside {
    margin-top: 10px;
}
.el-carousel >>> .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.el-carousel >>> .el-carousel__indicators--outside button {
    background-color: #d7d7d7;
}
.el-dropdown-link {
    width: 100% !important;
    display: inline-block !important;
}
.bgImg {
    background: url("../../assets/images/indexBg.png") no-repeat;
    width: 230px;
    border-radius: 6px;
    height: 125px;
    position: relative;
}
.bgImg2 {
    background: url("../../assets/images/indexBg2.png") no-repeat;
    width: 230px;
    border-radius: 6px;
    height: 125px;
    position: relative;
}
</style>
<style lang="scss" scoped>
.jx-index-banner2 {
    width: 100%;
    height: 370px; //yx
    .el-carousel {
        .el-carousel__indicators {
            bottom: 100px;
        }
        .el-carousel__button {
            background-color:#e1e1e1;
        }
    }
    .banner2-content {
        width: 100%;
        height: 100%;
        background-size: cover;
        .banner2-item{
            width:1200px;
            height:370px;
            margin:0 auto;
        }
    }
    .banner-1 {
        background: url("../../assets/images/banner-01.jpg") no-repeat 0 0;
    }
    .banner-2 {
        background: url("../../assets/images/banner-02.jpg") no-repeat 0 0;
    }
    .banner-3 {
        background: url("../../assets/images/banner-03.jpg") no-repeat 0 0;
    }
    .banner-1-item {
        background: url("../../assets/images/banner-01-item.png") no-repeat 0 0;
    }
    .banner-2-item {
        background: url("../../assets/images/banner-02-item.png") no-repeat 0 0;
    }
    .banner-3-item {
        background: url("../../assets/images/banner-03-item.png") no-repeat 0 0;
    }
    .banner-1-item1 {
        background: url("../../assets/images/banner-02-item-1.png") no-repeat 0 0;
    }
    .banner-2-item2 {
        background: url("../../assets/images/banner-02-item-2.png") no-repeat 0 0;
    }
    .banner-3-item3 {
        background: url("../../assets/images/banner-02-item-3.png") no-repeat 0 0;
    }
    img {
        width: 100%;
    }
}
.jx-index-banner {
    width: 100%;
    height: 280px; //yx

    img {
        width: 100%;
    }
}
.jx-index-banner-info {
    width: 100%;
    height: 280px; //yx
    background: url("../../assets/images/bgIndex.png") no-repeat;
    .mask-mask {
        background: rgba(0, 0, 0, 0.3);
        padding: 15px 0;
        position: absolute;
        left: 0;
        width: 100%;
        top: 0;
        z-index: 9;
        & > p {
            text-align: center;
            color: #fff;
        }
        .wrong {
            margin-left: 35px;
            opacity: 0.6;
            cursor: pointer;
        }
        .downsPath {
            cursor: pointer;
            color: #1277eb;
        }
        &:hover {
            a {
                color: #1277eb;
            }
        }
    }
    .jx-index-banner-info-box {
        width: 1200px;
        margin: 0 auto;
        .jx-index-banner-text {
            // width: 483px; //yx
            margin: 80px auto 0; //yx
            .jx-index-banner-text-xian {
                float: left;
                width: 1px;
                height: 32px;
                background: rgba(255, 255, 255, 0.5);
                margin: 10px 18px 0;
            }
            .jx-index-banner-text-item {
                float: left;
                color: #e8e8e8;
                text-align: center;
                //cursor: pointer;
                span {
                    font-size: 14px;
                    //margin-top: -6px;
                }
                p {
                    margin-top: 10px;
                    font-size: 26px;
                }
                .el-dropdown {
                    margin-top: 10px;
                    span {
                        font-size: 26px;
                        color: #e8e8e8;
                    }
                }
                &:hover {
                    //color: #e8e8e8;
                    color: #fff;
                    .el-dropdown {
                        span {
                            color: #fff;
                        }
                    }
                }
            }
        }
        .jx-index-banner-content {
            margin-left: 38px;
            .jx-index-banner-content-avatar {
                width: 60px;
                height: 60px;
                border-radius: 50px;
                overflow: hidden;
                margin: 70px auto 0;
                img {
                    width: 100%;
                }
            }
            .jx-index-banner-content-tips {
                font-size: 22px;
                color: #fff;
                text-align: center;
                margin-top: 90px;
                margin-left: 20px;
            }
        }
    }
}
.jx-index-content {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 1200px;
    margin: -90px auto 98px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 3px 0 21px rgba(0, 0, 0, 0.13);
    padding-bottom: 20px;
    .none-direction {
        margin:100px 0px 200px 0px;
        text-align: center;
        img {
             width: 287px;
            height: 297px;
        }
    }
    .jx-index-tab{
        // position: absolute;
        right: 30px;
        top: 30px;
        margin-top: 35px;
        padding: 0 30px;
        text-align: right;
        .el-button{
            padding: 6px 10px;
            border-radius: 0;
            margin-bottom: 20px;
            &.active{
                color: #1277eb;
                border-color: #1277eb;
                background: none;
            }
            &:active, &:focus{
                color: #1277eb;
                border-color: #1277eb;
                background: none;
            }
            &:hover{
                color: #1277eb;
                border-color: #1277eb;
                background: none;
            }
        }
    }
    .jx-content-title {
        margin-top: 50px;
        position: relative;
        .jx-content-title-hd {
            width: 484px;
            margin: 0 auto;
            border-top: 1px solid #cfcfcf;
        h1 {
            font-size: 16px;
            margin: -18px auto 0;
            padding: 0 40px;
            background-color: #fff;
            display: table;
            p {
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 30px;
            color: rgba(171, 171, 171, 0.3);
            font-weight: 100;
            }
        }
        }
        span {
            font-weight: 500;
            display: block;
            margin-top: 10px;
            text-align: center;
            font-size: 20px;
            color: #474747;
        }
        .courseNumber{
            color: #a0a0a0;
            font-size: 12px;
            border-radius: 15px;
            border: 1px solid #cfcfcf;
            padding:4px 6px;
            vertical-align:4px;
            position: absolute;
            left: 648px;
            top: 20px;
        }
    }

    .jx-course-list-button {
        position: absolute;
        cursor: pointer;
        &.prev {
            left: -80px;
        }
        &.next {
            right: -80px;
        }
        i {
            font-size: 44px;
            color: #d9d9d9;
        }
        &:hover {
            i {
                color: #757575;
            }
        }
    }
    .jx-course-list {
        position: relative;
        width: 1000px;
        margin: 50px auto 0;
        padding-bottom: 20px;
        .jx-course-text-title {
            text-align: center;
            font-size: 16px;
            color: #323232;
            margin-top: 22px;
            //yx溢出串版 加上省略号
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &.jx-course-list-login {
            .jx-course-list-button {
                top: 168px;
            }
        }
        .el-col {
            margin-bottom: 36px;
            .jx-course-tooltip{
                position: absolute;
                left: 14px;
                bottom: 14px;
                img{
                    float: left;
                    margin-right: 10px;
                }
            }
            .addClassImg {
                // position: absolute;
                left: 44px;
                bottom: 14px;
                width: 24px;
                height: 24px;
                display: inline-block;
                display: none;
                z-index: 999;
            }
            .studtntImg {
                // position: absolute;
                left: 14px;
                bottom: 14px;
                width: 24px;
                height: 24px;
                display: inline-block;
                // display: none;
                z-index: 999;
            }
            .s-Img {
                // position: absolute;
                left: 14px;
                bottom: 14px;
                width: 24px;
                height: 24px;
                display: inline-block;
                display: block;
                z-index: 999;
            }
            .studtntCourse {
                // position: absolute;
                left: 14px;
                bottom: 14px;
                width: 24px;
                height: 24px;
                display: inline-block;
                z-index: 999;
            }
            .maskI {
                background: #000;
                position: absolute;
                left: 0px;
                top: 0;
                width: 220px;
                height: 130px;
                opacity: 0.2;
                border-radius: 5px;
                display: none;
            }
            &:hover {
                .jx-course-box {
                cursor: pointer;
                i {
                    color: #ff0000;
                }
                .addClassImg {
                    display: block;
                }
                // .studtntImg {
                //     display: block;
                // }
                .studtntCourse {
                    display: none;
                }
                .maskI {
                    display: block;
                }
                .s-Img {
                    display: block;
                }
                }
            }
        }
        .jx-course-box {
            position: relative;
            width: 100%;
            height: 130px;
            line-height: 130px;
            // background: #3e4562;
            border-radius: 5px;
            text-align: center;
            // box-shadow: 8px 0 20px rgba(0, 0, 0, .44);
            // overflow: hidden;
            i {
                position: absolute;
                line-height: 1;
                right: 12px;
                color: #fff;
                cursor: pointer;
                display: none;
                &.icon-wode {
                    top: 14px;
                }
                &.icon-tianjia- {
                    bottom: 10px;
                }
            }
            img {
                width: 100%;
                transition: transform 0.6s;
            }
            .el-dropdown{
                position: absolute;
                top: 0;
                left: 0;
            }
            // .iconPath-fan{
            //     display: none;
            // }
            &:hover {
                i {
                display: block;
                }
                .iconPath {
                // display: none;
                transform: scale(1.05);
                transition: transform 0.6s;
                }
                // .iconPath-fan{
                //     display: inline-block;
                // }
            }
        }
        .jx-course-text {
            text-align: center;
            font-size: 12px;
            color: #888;
            margin-top: 10px;
        }
        .jx-course-list-button {
            top: 135px;
        }
    }
    .jx-course-list2 {
        position: relative;
        width: 1000px;
        margin: 50px auto 0;
        padding-bottom: 10px;
        .el-row {
            height: 160px;
            .el-col {
                height: 100%;
                margin-bottom: 20px;
            }
        }
        .jx-course-box {
            position: relative;
            width: 100%;
            height: 100%;
            border: dashed 1px #bfbfbf;
            box-sizing: border-box;
            background: #f9f9f9;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            &:hover {
                border: solid 1px #485f8c;
                background: #fff;
                .jx-course-box-title {
                    color: #385899;
                }
                .jx-course-box-num {
                    color: #385899;
                    border-top: solid 1px #385899;
                }
            }
            .jx-course-box-title {
                font-size: 16px;
                color: #545454;
                margin-top: 45px;
                line-height: 1.2;
                padding: 0 5px;
            }
            .jx-course-box-num {
                font-size: 16px;
                color: #545454;
                width: 48px;
                border-top: solid 1px #545454;
                padding-top: 20px;
                margin: 24px auto 0;
            }
        }
        .jx-course-list-button {
            top: 115px;
        }
    }
    .jx-course-list3 {
        position: relative;
        width: 1000px;
        margin: 50px auto 0;
        padding-bottom: 80px;
        .el-row {
            height: 100%;
            .el-col {
                height: 100%;
            }
        }
        .jx-course-box {
            position: relative;
            width: 100%;
            height: 100%;
            border: solid 1px #bfbfbf;
            box-sizing: border-box;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.5s;
            .iconPath {
                display: none;
            }
            .jx-course-box-img {
                width: 54px;
                height: 46px;
                line-height: 46px;
                text-align: center;
                margin: 38px auto 0;
                img {
                width: 100%;
                }
            }
            .jx-course-box-text {
                margin-top: 22px;
                padding: 0 20px;
                font-size: 16px;
                height: 20px;
                line-height: 20px;
                color: #3e4562;
                text-align: center;
                /* font-weight: bold; */
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            .jx-course-box-num {
                margin-top: 18px;
                text-align: center;
                font-size: 16px;
                color: #3e4562;
            }
            &:hover {
                border: solid 1px #485f8c;
                background: #485f8c;
                .iconPath {
                    display: inline-block;
                }
                .iconPath-fan {
                    display: none;
                }
                .jx-course-box-num,
                .jx-course-box-text {
                    color: #fff;
                }
            }
        }
        .jx-course-list-button {
            top: 70px;
        }
    }
    .jx-course-list4{
        position: relative;
        width: 1000px;
        margin: 50px auto 0;
        .el-col{
            margin-bottom: 40px;
        }
        .list{
            position: relative;
            background: #fff;
            box-shadow: 0 0 8px rgba(0,0,0,.1);
            border-radius: 5px;
            border: 1px solid #ddd;
            height: 112px;
            box-sizing: border-box;
            padding: 22px 15px 18px;
            transition: transform 0.5s;
            cursor: pointer;
            &:hover{
                // transform: translate(0, -3px);
                box-shadow: 0 0 16px rgba(0,0,0,.15);
            }
            .list-left{
                .title{
                    span{
                        font-size: 16px;
                        font-weight: bold;
                        color: #323232;
                        width: 200px;
                        display: block;
                        height: 18px;
                        overflow: hidden;
                        line-height: 18px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p{
                        width: 14px;
                        height: 3px;
                        margin-top: 10px;
                        &.orange{
                            background: #ff6113;
                        }
                        &.green{
                            background: #00c083;
                        }
                        &.pink{
                            background: #fb5fac;
                        }
                        &.darkGreen{
                            background: #22adaf;
                        }
                        &.blue{
                            background: #385899;
                        }
                    }
                }
                .num{
                    font-size: 12px;
                    color: #888888;
                    margin-top: 25px;
                }
            }
            .list-right{
                margin-top: 5px;
            }
            .delete{
                position: absolute;
                right: 10px;
                top: 10px;
                i{
                    color: #8f8f8f;
                }
            }
            .point{
                position: absolute;
                width: 6px;
                height: 6px;
                background: #385899;
                border-radius: 3px;
                left: 10px;
                top: 10px;
            }
            .tips{
                position: absolute;
                width: 100%;
                height: 50px;
                background: #fff;
                bottom: -50px;
                left: 0;
                right: 0;
                padding: 15px 15px 0;
                box-sizing: border-box;
                box-shadow: 0 0 8px rgba(0,0,0,.1);
                transition: .3s;
                span{
                    position: relative;
                    width: 44px;
                    height: 24px;
                    line-height: 22px;
                    background: #385899;
                    text-align: center;
                    display: inline-block;
                    border-radius: 12px;
                    cursor: pointer;
                    margin-right: 8px;
                    &:hover{
                        background: #1277eb;
                    }
                    i{
                        color: #fff;
                        font-size: 12px;
                    }
                    input{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        cursor:hand;
                        opacity: 0;
                    }
                }
            }
        }
    }
    // 首页暂无数据提示
    .jx-course-tips {
        text-align: center;
        margin: 110px 0 170px;
        span {
            display: block;
            margin-top: 45px;
            font-size: 18px;
        }
    }
}
</style>
